<template>


  <div class="crumb">
    <div class="crumb-content">
      <router-link to="/">MyStore</router-link>
      <span>></span>
      <span class="link-text">orderView</span>
    </div>
  </div>
  <div class="crumb">
    Thank you, your order has been submitted!
    <router-link to="/" class="align-right">Return to MyStore</router-link>
  </div>
  <div class="order">
    <div class="panel">
      <table class="order-table">
        <thead>
        <tr>
          <th colspan="2">Order # {{ orderId }}
            {{ formatOrderDate(orderDate) }}</th>
        </tr>
        <tr>
          <th colspan="2">Payment Details</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td>Card Type:</td>
          <td>{{ cardType }}</td>
        </tr>
        <tr>
          <td>Card Number:</td>
          <td>{{ creditCardNumber }} (* Fake number!)</td>
        </tr>
        <tr>
          <td>Expiry Date (MM/YYYY):</td>
          <td>{{ expiryDate }}</td>
        </tr>
        <tr>
          <th colspan="2">Billing Address</th>
        </tr>
        <tr>
          <td>First name:</td>
          <td>{{ firstName }}</td>
        </tr>
        <tr>
          <td>Last name:</td>
          <td>{{ lastName }}</td>
        </tr>
        <tr>
          <td>Address 1:</td>
          <td>{{ address1 }}</td>
        </tr>
        <tr>
          <td>Address 2:</td>
          <td>{{ address2 }}</td>
        </tr>
        <tr>
          <td>City:</td>
          <td>{{ city }}</td>
        </tr>
        <tr>
          <td>State:</td>
          <td>{{ state }}</td>
        </tr>
        <tr>
          <td>Zip:</td>
          <td>{{ zip }}</td>
        </tr>
        <tr>
          <td>Country:</td>
          <td>{{ country }}</td>
        </tr>
        <tr>
          <td>Courier:</td>
          <td>{{ courier }}</td>
        </tr>
        <tr>
          <td colspan="1">Status:</td>
          <td>{{ status }}</td>
        </tr>
        </tbody>
      </table>

      <table class="total-table">
        <tr>
          <th class="img">Product Picture</th>
          <th class="id">Product ID</th>
          <th class="price">Price</th>
          <th class="count">Quantity</th>
          <th class="totalPrice">Total Price</th>
        </tr>
        <tr v-for="item in cartlist" :key="item.id">
          <td>
            <div class="img">
              <img :src="'data:image/png;base64,'+item.Item_Picture"/>
            </div>
          </td>
          <td class="id">{{ item.Item_Id }}</td>
          <td class="price">${{ item.Price }}</td>
          <td class="count">{{ item.Count }}</td>
          <td class="totalPrice">{{ item.Price * item.Count}}</td>
        </tr>
      </table>

    </div>

  </div>

</template>

<script>
import {defineComponent} from 'vue'
import router from "@/router";
import Top from '@/components/common/nav-head.vue';
import Bottom from '@/components/common/bottom.vue';
export default defineComponent({
  name:"view-order",
  components: {
    Top,
    Bottom
  },
  data() {
    return {
      cartlist: this.$store.getters['getcartList'],
      cardType: sessionStorage.getItem('cardType') || '',
      creditCardNumber: sessionStorage.getItem('creditCardNumber') || '',
      expiryDate: sessionStorage.getItem('expiryDate') || '',
      firstName: sessionStorage.getItem('firstName') || '',
      lastName: sessionStorage.getItem('lastName') || '',
      address1: sessionStorage.getItem('address1') || '',
      address2: sessionStorage.getItem('address2') || '',
      city: sessionStorage.getItem('city') || '',
      state: sessionStorage.getItem('state') || '',
      zip: sessionStorage.getItem('zip') || '',
      country: sessionStorage.getItem('country') || '',
      courier: 'UPS',
      status: 'P',
      lineItems: [],
      totalPrice: 0,
      orderId: 1000
    }
  }
  ,mounted() {
    // 在这里编写获取当前订单的逻辑，可以使用axios或fetch等库进行异步请求
    // 将获取到的数据赋值给currentOrder
  },
  computed: {
    totalprice: {
      get () {
        let total = 0
        for (let cart of this.cartlist) {
          total += cart.Price * cart.Count
        }
        return total
      }
    }
  },

  methods: {
    getItemLink(itemId) {
      // 在这里编写获取商品链接的逻辑
      return 'itemForm?itemId=' + itemId;
    },
    getTotalPrice() {
      // 在这里编写计算总价的逻辑
      let total = 0;
      for (let i = 0; i < this.lineItems.length; i++) {
        const lineItem = this.lineItems[i];
        total += lineItem.unitPrice * lineItem.quantity;
      }
      return total;
    },
    formatOrderDate(dateStr) {
      // 在这里编写格式化日期的逻辑，可以使用moment.js或Date等库进行日期格式化
      return '';
    },
    confirm() {
      // TODO: Add functionality for confirm button
    }
  }
})
</script>

<style src="@/assets/OrderPage/order.css"></style>